<template>
  <div class="suppedit">
    <!-- 供应商-对话框 -->
    <el-dialog
      title="修改供应商"
      :visible.sync="suppEdit"
      width="50%">
      <el-form :model="supplierForm" ref="supplierForm" size="medium" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="供应商编号:" prop="supp_no">
              <el-input v-model="supplierForm.supp_no" placeholder="供应商编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商名称:" prop="supplier_name">
              <el-input v-model="supplierForm.supplier_name" placeholder="供应商名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="供应商类别:" prop="supp_type_value">
              <el-select v-model="supplierForm.supp_type_value" placeholder="选择供应商类别" style="width: 100%;">
                <el-option
                v-for="item in supplierList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="余额日期:" prop="balance_date">
              <el-date-picker
                v-model="supplierForm.balance_date"
                type="date"
                format="yyyy-MM-dd"
                placeholder="余额日期" style="width: 100%;">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="期初应付款:" prop="start_due">
              <el-input v-model="supplierForm.start_due" placeholder="期初应付款"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="期初预付款:" prop="start_pay">
              <el-input v-model="supplierForm.start_pay" placeholder="期初预付款"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="增值税税率:" prop="VAT_rate"><span>
              <el-input-number :min="0" v-model="supplierForm.VAT_rate" placeholder="增值税税率" controls-position="right">
              </el-input-number>%</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格 -->
      <div class="bank-form">
        <div class="form-item">
          <el-table
            :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            class="table"
            stripe border
            @cell-click="editData"
            :row-class-name="tableRowClassName"
            :header-cell-style="{background:'#f3f3f3',textAlign: 'center'}"
            :cell-style="{ textAlign: 'center' }"><!--:data="用于存放请求数据回来的数组" -->
            <el-table-column prop="contact" label="联系人">
              <template slot-scope="scope">
                <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '联系人'">
                  <el-input v-model="scope.row.contact" size="mini" @blur="inputBlur">
                  </el-input>
                </span>
                <span v-else>{{ scope.row.contact }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="phone" label="手机">
              <template slot-scope="scope">
                <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '手机'">
                  <el-input v-model="scope.row.phone" size="mini" @blur="inputBlur">
                  </el-input>
                </span>
                <span v-else>{{ scope.row.phone }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="联系地址">
              <template slot-scope="scope">
                <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '联系地址'">
                  <el-input v-model="scope.row.address" size="mini" @blur="inputBlur">
                    <el-button slot="append" type="text" icon="el-icon-search" @click="openAddr(scope.$index)"></el-button>
                  </el-input>
                </span>
                <span v-else>{{ scope.row.address }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="first_contact" label="首要联系人">
              <template slot-scope="scope">
                <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '首要联系人'" style="width: 100%;">
                  <el-select v-model="scope.row.first_contact" size="mini">
                    <el-option value="是" label="是"></el-option>
                    <el-option value="否" label="否"></el-option>
                  </el-select>
                </span>
                <span v-else>{{ scope.row.first_contact }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页-页码 -->
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
          </el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="suppEdit = false">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
    <choose-addr ref="ChooseAddr" @valAddr="addrData"></choose-addr>
  </div>
</template>

<script>
  import ChooseAddr from '@/components/supplier-list/ChooseAddr';
  export default {
    components:{
      ChooseAddr
    },
    name: 'SuppEdit',
    props:{
      rows:{}
    },
    data() {
      return {
        suppEdit: false, //供应商对话框
        tabClickIndex: null, // 点击的单元格
        tabClickLabel: '', // 当前点击的列名
        currentPage: 1, //当前页码
        pagesize: 5,    //每页的数据条数
        tableData: [],
        addr: '',
        indexs: '',
        supplierForm: {
          supp_no: '',
          supplier_name: '',
          supp_type_value: '',
          balance_date: '',
          start_due: '', //期初应付款
          start_pay: '', //期初预付款
          VAT_rate: ''
        },
        supplierList: [
          {value: '0',label: '水果'},
          {value: '1',label: '手机'},
          {value: '2',label: '纸厂'}
        ]
      }
    },
    created() {

    },
    //深度监听对象
    watch: {
      rows: {
        handler(newval, oldVal) {
          this.supplierForm = newval;
          this.tableData = [{
            contact: newval.contact,
            phone: newval.phone,
            address: newval.address,
            first_contact: newval.first_contact
          }]
        },
        deep: true
      }
    },
    methods:{
      //打开对话框
      openSupplier() {
        this.suppEdit = true;
      },
      //保存
      save () {
        this.$refs['supplierForm'].validate(valid => {
          if (valid) {
            console.log('form',this.supplierForm)
            console.log('table',this.tableData)
						this.suppEdit = false;
            this.$message.success('保存成功')
          } else {
            this.$message.error('表单验证失败!')
          }
        })
      },

      tableRowClassName({row,rowIndex}) {
        // 把每一行的索引放进row
         row.index = rowIndex
      },

      //表格-对话框地址
      openAddr(index) {
        this.$nextTick(()=>{
          this.$refs.ChooseAddr.open();
        });
        this.indexs = index;
      },

      //接收子组件传递的addrForm数据
      addrData(data) {
        // 怎么获取index?
        this.addr = data.province + data.city + data.area + data.address_detail;
        console.log(this.addr)
        for (let i = 0;i < this.tableData.length;i++) {
          if(this.indexs == this.tableData[this.indexs].index){
            this.tableData[this.indexs].address = this.addr;
          }
        }
      },

      // 添加明细原因 row 当前行 column 当前列
      editData(row, column, cell, event) {
        console.log(row,column)

        switch (column.label) {
          case '联系人':
            this.tabClickIndex = row.index
            this.tabClickLabel = column.label
            break
          case '手机':
            this.tabClickIndex = row.index
            this.tabClickLabel = column.label
            break
          case '联系地址':
            this.tabClickIndex = row.index
            this.tabClickLabel = column.label
            break
          case '首要联系人':
            this.tabClickIndex = row.index
            this.tabClickLabel = column.label
            break
          default: return
        }
        console.log('供应商', this.tabClickIndex, row, column, cell, event)
      },

      // 失去焦点初始化
      inputBlur(row, event, column) {
        this.tabClickIndex = null
        this.tabClickLabel = ''
      },

      //每页条数改变时触发事件,选择一页显示多少行
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.currentPage = 1;
        this.pagesize = val;
      },
      // 当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
      }
    }
  }
</script>

<style>
</style>
